<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
</head>
<link rel="stylesheet"
	href="css/gopayment.css?id=<%=new Date().getTime()%>" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
	var hdzid="";
	var dzid = "";
	var isBack = false;
	
	function addressdan(dzids) {
		var dzids = "";
		$("#address002").empty();
		var hid = "${user.hid}";
		var pd = "-1";
		var address = "";
		var sss = "${address.dzid}";
		if(sss != ""){
			dzids = sss;
		}
		//dzid = dzids;
		$
				.post(
						"gopaymenttwo.shtml",
						{
							"hid" : hid,
							"pd" : pd,
							"dzid" : dzid,
							"dzids":dzids
						},
						function(data) {
							address = data.address1 + data.address2
									+ data.address3 + data.xiangxi;
							var one = "<div><span style='color:#999;' data="+data.dzid+" class='shr'>收货人：</span><span>"
									+ data.shname
									+ "</span></div><div><span style='color:#999;'>联系方式：</span><span>"
									+ data.phone
									+ "</span></div><div><span style='color:#999;'>收货地址：</span><span>"
									+ address + "</span></div>";
							$("#address002").append(one);
							isBack = true;
						})
	}
	
	
	function addressAll() {
		$("#addressTab002").empty();
		var hid = "${user.hid}";
		var pd = "0";
		var dzid = "";
		var address = "";
		$
				.post(
						"gopaymenttwo.shtml",
						{
							"hid" : hid,
							"pd" : pd,
							"dzid" : dzid
						},
						function(data) {
							$
									.each(
											data,
											function() {
												address = this.address1
														+ this.address2
														+ this.address3
														+ this.xiangxi;
												var two = "<div style='height:100px;border:1px solid #e8e8e8;padding:20px;box-sizing:border-box;margin-bottom:10px;margin-right:10px;transition:all 0.18s linear;' data="+this.dzid+" class='address005s'><div><span style='color:#999;'>收货人：</span><span>"
														+ this.shname
														+ "</span></div><div><span style='color:#999;'>联系方式：</span><span>"
														+ this.phone
														+ "</span></div><div><span style='color:#999;'>收货地址：</span><span>"
														+ address
														+ "</span></div></div>";
												$("#addressTab002").append(two);
											})
						})
	}
	function addaddressAll() {
		
		if($("#province").val()==""){
			alert("请选择省份");
			return;
		}
		if($("#detailsaddress").val()==""){
			alert("请填写详细的收货地址");
			return;
		}
		if($("#people").val()==""){
			alert("请填写收货人");
			return;
		}
		if($("#phone").val()==""){
			alert("请填写手机号");
			return;
		}
		$("#addressTab002").empty();
		var hid = "${user.hid}";
		var pd = "0";
		var dzid = "";
		var address = "";
		var address1 = $("#province").val();
		var address2 = $("#city").val();
		var address3 = $("#area").val();
		var detailsaddress = $("#detailsaddress").val();
		var phone = $("#phone").val();
		var people = $("#people").val();
		$
				.post(
						"gopaymenttwo.shtml",
						{
							"hid" : hid,
							"pd" : pd,
							"dzid" : dzid,
							"address1":address1,
							"address2":address2,
							"address3":address3,
							"detailsaddress":detailsaddress,
							"phone":phone,
							"people":people
						},
						function(data) {
							$
									.each(
											data,
											function() {
												address = this.address1
														+ this.address2
														+ this.address3
														+ this.xiangxi;
												var two = "<div style='height:100px;border:1px solid #e8e8e8;padding:20px;box-sizing:border-box;margin-bottom:10px;margin-right:10px;transition:all 0.18s linear;' data="+this.dzid+" class='address005s'><div><span style='color:#999;'>收货人：</span><span>"
														+ this.shname
														+ "</span></div><div><span style='color:#999;'>联系方式：</span><span>"
														+ this.phone
														+ "</span></div><div><span style='color:#999;'>收货地址：</span><span>"
														+ address
														+ "</span></div></div>";
												$("#addressTab002").append(two);
											})
						})
						
						$("#address007").css("display", "block");
		$("#address008").css("display","none");
	}
	$(function() {
		new PCAS("province", "city", "area", "---请选择---", "---请选择---",
		"---请选择---");
		new PCAS("provinces", "citys", "areas", "---请选择---", "---请选择---",
		"---请选择---");
		addressdan();
		var timer = setInterval(function(){
			if(isBack == true){
				hdzid= $(".shr").attr("data");
				clearInterval(timer);
			}
		},100);
		var s = "${address.dzid}";
		//alert(s);
	 	if(s != ""){
			 $("#address007").css("display", "none");
			$("#address0010").css("display","block");
			new PCAS("provinces", "citys", "areas", "${address.address1}", "${address.address2}",
			"${address.address3}");
			/* $("#citys").val("${address.address2}")
			$("#provinces").val("${address.address1}")
			alert("${address.address2}");
			$("#areas").val("${address.address3}") */
		} 
			
		/* addressAll(); */
		$("#addressTab").click(function() {
			$(".addressTab001").fadeIn(500);
			setTimeout(function() {
				$("#address003").show(300);
				addressAll();
			}, 299);
		})

		$("#addressExit").click(function() {
			$("#address003").fadeOut(500);
			setTimeout(function() {
				$(".addressTab001").slideUp(300);
			}, 299);
		})
		$("#addressTab002").on("click", ".address005s", function() {
			dzid = $(this).attr("data");
			$(this).css({
				"box-shadow" : "2px 2px 10px rgba(0,0,0,0.6)",
				"border" : "1px solid #b4a078"
			});
			$(this).siblings().css({
				"border" : "1px solid #e8e8e8",
				"box-shadow" : "none"
			});
		});

		$("#addressDetermine").click(function() {
			if (dzid == undefined) {
				alert("请选择地址");
				return;
			}
			$(".addressTab001").slideUp(300);
			addressdan(dzid);
			var timer = setInterval(function(){
				if(isBack == true){
					hdzid= $(".shr").attr("data");
					clearInterval(timer);
				}
			},100);
		})
		

		$("#create-address").click(function() {
			$("#address007").css("display", "none");
			$("#address008").css("display","block");
			$("#province").val("---请选择---");
			$("#city").val("---请选择---");
			$("#area").val("---请选择---");
			new PCAS("province", "city", "area", "---请选择---", "---请选择---",
			"---请选择---");
			$("#detailsaddress").val("");
			$("#people").val("");
			$("#phone").val("");
			$("#addressTab002").val("");
		})
		$("#quxiao").click(function() {
			$("#address007").css("display", "block");
			$("#address008").css("display","none");
		})
		$("#saveAddress").click(function(){
			addaddressAll();
		})
			$("#upd").click(function(){
				/* new PCAS("provinces", "citys", "areas", "---请选择---", "---请选择---",
				"---请选择---"); */
				/* $("#address007").css("display", "none");
				$("#address0010").css("display","block"); */
				location.href="updSCAddress.shtml?dzid="+hdzid;
	})
		$("#quxiaos").click(function(){
		$("#address007").css("display", "block");
		$("#address0010").css("display","none");
	})
	$("#saveAddresss").click(function(){
		$("#updform").trigger("submit");
	})
	var s = "${kai}";
	if(s != ""){
		$("#address007").css("display", "block");
		$("#address0010").css("display","none");
	}
		})
	
</script>
<body>
	<%@ include file="Header.jsp"%>
	<div class="pay-style-width">
		<div class="pay-style-width-ern">
			<div style="margin-top: 40px;">
				<div
					style="height: 35px; background-color: #f5f5f5; border: 1px solid #e8e8e8; line-height: 35px; color: #999; padding-left: 30px; box-sizing: border-box;">收货信息</div>
				<div id="addressTab00222">
					<!-- 显示地址信息 -->
					<div class="clear address01"
						style="box-sizing: border-box; padding: 25px; border: 1px solid #e8e8e8" id="address007">
						<div class="addressInfo001 left">
							<div
								style="width: 65px; height: 30px; line-height: 30px; text-align: center; background-color: #f5f3ef; border: 1px solid #b4a078; border-radius: 2px; color: #b4a078" id="upd" >
								修改</div>
							<div id="address002">
							</div>
						</div>
						<div class="right">
							<div
								style="height: 100px; border-left: 1px solid #e2e2e2; float: left; margin-right: 80px; margin-top: 15px;"></div>
							<div class="left" style="margin-top: 35px;">
								<div style="margin-left: 25px;" id="addressTab">地址切换</div>
								<div
									style="width: 100px; margin-top: 15px;; height: 28px; line-height: 28px; text-align: center; background-color: #f5f5f5; border: 1px solid #ccc; border-radius: 2px; color: blank; margin-right: 50px;"
									id="create-address">新建地址</div>
							</div>
						</div>
					</div>
					<!-- 显示新建地址 -->
					<script language="javascript" src="js/PCASClass.js"
						charset="gb2312"></script>
					<div class="clear address01"
						style="box-sizing: border-box; padding: 25px; border: 1px solid #e8e8e8;display:none;" id="address008">
						<form action="">
							<div class="left">
								<div class="clear" style="margin-bottom: 25px;">
									<div class="left">所在地区：</div>
									<div class="left">
										<select name="province" id="province"
											style="margin-right: 20px; width: 130px; height: 22px; letter-spacing: 0.2em;"></select><select
											name="city" id="city"
											style="margin-right: 20px; width: 130px; height: 22px; letter-spacing: 0.2em;"></select><select
											name="area" id="area"
											style="margin-right: 20px; width: 130px; height: 22px; letter-spacing: 0.2em;"></select>
									</div>
									
								</div>
								<div class="clear" style="margin-bottom: 25px;">
									<div class="left">详细地址：</div>
									<div class="left">
										<textarea name="detailsaddress" id="detailsaddress" cols="86"
											rows="3"></textarea>
									</div>
								</div>
								<div style="margin-left: 12px;">
									<div class="left">
										<span>收货人：</span><span><input type="text" name="people"
											id="people" style="width: 160px; height: 22px;" /></span>
									</div>
									<div class="left" style="margin-left: 40px;">
										<span>手机号码：</span><span><input type="text" name="phone"
											id="phone" style="width: 160px; height: 22px;" /></span>
									</div>
								</div>
							</div>
							<div
								style="border-left: 1px dashed #dedede; margin-left: 80px; float: left; margin-top: 0px;height:160px;">
							</div>
							<div style="float: left">
								<p
									style="width: 120px; margin-left: 90px; margin-top: 20px;; margin-bottom: 25px; height: 32px; line-height: 32px; background-color: #b4a078; border: 1px solid #b4a078; border-radius: 2px; color: white; font-size: 14px; letter-spacing: 0.2em; text-align: center;" id="saveAddress">保存地址</p>
								<p
									style="width: 120px; margin-left: 90px; height: 32px; text-align: center; line-height: 32px; background-color: #f5f3ef; border: 1px solid #b4a078; border-radius: 2px; color: white; font-size: 14px; letter-spacing: 0.2em; color: #b4a078" id="quxiao">取消</p>
							</div>
						</form>
						<!-- 			<script language="javascript" defer>
					new PCAS("province","city","area","吉林省","白城市","大安市");
					</script> -->
					</div>
					
					<!-- 修改的地址模板 -->
						
								<div class="clear address01"
						style="box-sizing: border-box; padding: 25px; border: 1px solid #e8e8e8;display:none;" id="address0010">
						<form action="updSCAddress.shtml" id="updform" method="post">
							<div class="left">
								<div class="clear" style="margin-bottom: 25px;">
									<div class="left">所在地区：</div>
									<div class="left">
										<select name="provinces" id="provinces"
											style="margin-right: 20px; width: 130px; height: 22px; letter-spacing: 0.2em;"></select><select
											name="citys" id="citys"
											style="margin-right: 20px; width: 130px; height: 22px; letter-spacing: 0.2em;"></select><select
											name="areas" id="areas"
											style="margin-right: 20px; width: 130px; height: 22px; letter-spacing: 0.2em;"></select>
									</div>
								</div>
								<div class="clear" style="margin-bottom: 25px;">
									<div class="left">详细地址：</div>
									<div class="left">
										<textarea name="detailsaddresss" id="detailsaddresss" cols="86"
											rows="3">${address.xiangxi }</textarea>
									</div>
								</div>
								<div style="margin-left: 12px;">
									<div class="left">
										<span>收货人：</span><span><input type="text" name="peoples"
											id="peoples" style="width: 160px; height: 22px;" value="${address.shname }" /></span>
									</div>
									<div class="left" style="margin-left: 40px;">
										<span>手机号码：</span><span><input type="text" name="phones"
											id="phones" style="width: 160px; height: 22px;" value="${address.phone }" />
											<input type="text" name="dzid" id="dzid" value="${address.dzid }" />
											<input type="text" name="Hid" id="Hid" value="${user.hid }" />
											</span>
									</div>
								</div>
							</div>
							<div
								style="border-left: 1px dashed #dedede; margin-left: 80px; float: left; margin-top: 0px; height: 160px;">
							</div>
							<div style="float: left">
								<p
									style="width: 120px; margin-left: 90px; margin-top: 20px;; margin-bottom: 25px; height: 32px; line-height: 32px; background-color: #b4a078; border: 1px solid #b4a078; border-radius: 2px; color: white; font-size: 14px; letter-spacing: 0.2em; text-align: center;" id="saveAddresss">保存地址</p>
								<p
									style="width: 120px; margin-left: 90px; height: 32px; text-align: center; line-height: 32px; background-color: #f5f3ef; border: 1px solid #b4a078; border-radius: 2px; color: white; font-size: 14px; letter-spacing: 0.2em; color: #b4a078" id="quxiaos">取消</p>
							</div>
						</form>
						<!-- 			<script language="javascript" defer>
					new PCAS("province","city","area","吉林省","白城市","大安市");
					</script> -->
					</div>
				</div>

				<div class="addressTab001">
					<div
						style="width: 470px; background-color: white; height: 460px; margin: 120px auto; padding: 20px 40px 30px 40px; box-sizing: border-box; display: none"
						id="address003">
						<div style="height: 40px; line-height: 30px;" class="clear">
							<p class="left" style="font-size: 14px;">选择地址</p>
							<p class="right">*</p>
						</div>

						<div id="addressTab002"
							style="height: 320px; max-height: 320px; letter-spacing: 0.4em; overflow: auto;">
						</div>
						<div
							style="margin-top: 20px; text-align: center; letter-spacing: 0.8em;"
							class="clear">
							<div
								style="width: 110px; height: 30px; line-height: 30px; border: 1px solid #ccc; background-color: #ccc; border-radius: 2px; float: left; margin-left: 80px; color: white; font-size: 14px;"
								id="addressDetermine">确定</div>
							<div
								style="width: 110px; height: 30px; line-height: 30px; border: 1px solid #ccc; background-color: #f5f5f5; border-radius: 2px; float: left; margin-left: 20px; font-size: 14px;"
								id="addressExit">取消</div>
						</div>
					</div>
				</div>
			</div>
			<div></div>
			<div></div>
		</div>
	</div>



</body>
</html>